<template>
  <view>
    <u-card
        :border="false"
        box-shadow="0px 0px 8px #ddd6d6"
        :body-style="{ padding: '0 20rpx' }"
        :head-style="{ padding: '28rpx 30rpx 10rpx' }"
        :head-border-bottom="false"
      >
        <view slot="head">
          <view class="card-row u-flex head" @click="goList">
            <u-section title="在职人员" color="#014833" font-size="32" sub-title="更多"></u-section>
          </view>
        </view>
        <view slot="body">
          <view class="card-row u-p-t-10 u-p-b-20">
            <scroll-view :scroll-x="true" class="u-flex of-hide">
              <view class="container-body u-flex">
                <view class="body-card" v-for="(obj,id) in tblist" :key="id">
                  <view class="body-card-tit">{{ obj.post }}</view>
                  <view class="body-card-txt">
                    <view class="u-flex">
                      <u-image mode="aspectFit" width="32rpx" height="32rpx" src="/static/image/workbench/practitioner/name.png"></u-image>
                      <text class="u-p-l-10 u-p-r-10 f-bold wd" @click="detail(obj)">{{obj.name}}</text>
                    </view>
                    <view class="u-flex">
                      <u-image mode="aspectFit" width="32rpx" height="32rpx" src="/static/image/workbench/practitioner/phone.png"></u-image>
                      <text class="u-p-l-10 u-p-r-10 wd">{{ obj.contactPhone }}</text>
                      <text class="blue" @click.stop="copy(obj.contactPhone)">复制</text>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
            
          </view>
        </view>
      </u-card>
  </view>
</template>
<script>
  export default {
    props: {
			customerId: {
				type: String,
				default: ''
			},
		},
    watch: {
      'customerId': {
        immediate: true,
        handler: function (newval) {
          if (newval) {
            this.getData(newval);
          }
        },
      },
		},
    data(){
      return{
        tblist:[]
      }
    },
    methods:{
      copy(val){
        uni.setClipboardData({
					data: val,
					success: () => {
						uni.hideToast();
						this.$nextTick(() => {
							this.$u.toast('已复制');
						})
					}
				});
      },
      detail (item) {
        uni.navigateTo({
          url: '/pages/practitioner/archives/detail?employeeId=' + item.employeeId
        })
      },
      getData(val){
        this.$get(`/cyry/home/getMineFivePostList?customerId=${val}`).then(res=>{
          if(res.body[0]){
            const five=['矿长',"总工程师","安全副矿长","生产副矿长","机电副矿长"]
            const arr=res.body[0].personPostVoList.filter(el=>five.includes(el.post))
            this.tblist=arr
          }
        })
      },
      goList(){
        uni.navigateTo({
          url: `/pages/practitioner/archives/index?customerId=${this.customerId}`
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .head{
    padding-bottom: 24rpx;
    border-bottom:  2rpx solid #F6F6F6;
  }
  .body-card{
    border: 2rpx solid  rgba($color: #5BAC84, $alpha: 0.3);
    border-radius: 8rpx;
    margin-right: 20rpx;
    &-tit{
      text-align: center;
      padding: 10rpx 0;
      background: rgba($color: #5BAC84, $alpha: 0.1);
      color: #5BAC84;
    }
    &-txt{
      padding-bottom:16rpx;
      padding-left: 16rpx;
      >view{
        padding-top: 16rpx;
        color: #333;
        .wd{
          display: inline-block;
          width: 200rpx;
        }
        .blue{
          display: inline-block;
          width: 70rpx;
          color: #3D5FFF;

        }
      }
    }
  }
</style>